<template>
  <section class="flex w-full flex-col flex-1">
    <a-row
      :gutter="24"
      class="mb-8px aic"
      style="margin-left: 0; margin-right: 0"
    >
      <div class="dib fs12" v-if="props.showSelection">
        已选择
        <span class="color-1989fa">{{ state.selectedRowKeys.length }}</span
        >条数据
        <a-button type="link" size="small" @click="onCancelSelect">
          取消选择
        </a-button>
      </div>
      <a-col flex="1">
        <slot name="btns"> </slot>
      </a-col>
      <cps-button
        size="small"
        class="mr10"
        v-if="props.hasPrint"
        @click="printSelectEvent"
        >打印</cps-button
      >
      <cps-button
        size="small"
        class="mr10"
        plain
        icon="download"
        :loading="state.exportLoading"
        v-if="props.hasExport"
        @click="exportExcel"
        >导出</cps-button
      >
      <cps-button
        size="small"
        class="mr10"
        icon="refresh"
        v-if="props.hasRefresh"
        @click="refresh()"
        >刷新</cps-button
      >
      <cps-button
        v-if="props.hasReset"
        size="small"
        class="mr10"
        icon="refresh"
        @click="reset()"
      >
        重置
      </cps-button>
      <column-settings
        v-if="props.showSetting && !props.columns"
        class="show-setting"
        :buttonStyle="props.buttonStyle"
        v-model:value="state.menuListFields"
        :menuName="props.menuName"
        @change="refreshColumn"
      ></column-settings>
    </a-row>
    <div class="vxe-table-container flex-1">
      <vxe-table
        :id="state.tableId"
        v-bind="$attrs"
        class="cpsVxeTable"
        :class="{
          vxeNoOverflow: !$attrs['row-config']?.height
        }"
        :mergeCells="props.mergeCells"
        ref="tableDom"
        @checkbox-all="selectChangeEvent"
        @checkbox-change="selectChangeEvent"
        @radio-change="radioChangeEvent"
        :radio-config="{ checkRowKey: state.selectedRowKeys?.[0] }"
        :checkbox-config="{ checkRowKeys: state.selectedRowKeys }"
        :round="$attrs.round === false ? false : true"
        :loading="state.loading"
        size="mini"
        :row-config="
          $attrs['row-config'] || {
            isHover: true,
            useKey: true,
            keyField: rowKey
          }
        "
        border
        :column-config="{ resizable: true }"
        :data="state.vxeDatas"
        :scroll-x="{ enabled: false }"
        :scroll-y="{ enabled: false }"
        @filter-visible="filterVisibleEvent"
        :custom-config="{ storage: true }"
      >
        <template #empty>
          <a-empty size="small" class="py-20px" />
        </template>

        <template v-if="props.showSelection">
          <vxe-column
            align="center"
            :type="props.rowType"
            width="60"
            fixed="left"
          ></vxe-column>
        </template>

        <template v-if="state.vxeColumns.length">
          <template
            v-for="(item, columnIndex) in state.vxeColumns"
            :key="item.dataIndex"
          >
            <vxe-colgroup v-if="item?.colgroup" :title="item.title">
              <vxe-column
                v-for="(pitem, colgroupIndex) in item.colgroup"
                :key="pitem.dataIndex"
                :fixed="pitem.fixed"
                :field="pitem.dataIndex"
                :filters="[]"
                :width="calcColumnWidth(pitem)"
                :title="pitem.title"
                :sortable="pitem.sortable"
                :align="pitem.align"
              >
                <template #header="{ column }">
                  <slot
                    :name="pitem.slots?.titleLeft"
                    v-if="pitem.slots && pitem.slots.titleLeft"
                  ></slot>
                  <slot :name="pitem.slots && pitem.slots.title">
                    <b>{{ column.title }}</b>
                  </slot>
                  <vxe-icon
                    v-if="pitem?.filtered"
                    @click="openFilterEvent(column)"
                    name="funnel"
                    class="icon-filter cursor-pointer ml-10px"
                    :class="{
                      active: pitem?.filterValue?.length > 0
                    }"
                  ></vxe-icon>
                  <slot
                    :name="pitem.slots?.titleRight"
                    v-if="pitem.slots && pitem.slots.titleRight"
                  ></slot>
                </template>
                <!-- 自定义筛选 -->
                <template v-if="pitem?.filtered" #filter="{ column }">
                  <!-- 批量搜索 -->
                  <template v-if="pitem.isBatch">
                    <div class="vxeTable-batch-search">
                      <div class="rm-popover pr p10" style="overflow: hidden">
                        <h4 class="mb10">批量查询</h4>
                        <a-input
                          style="width: 100%"
                          allowClear
                          v-model:value="pitem.batchValue"
                          placeholder="支持复制或输入关键词"
                          @pressEnter="
                            e => handlerBatchBlur(e, columnIndex, colgroupIndex)
                          "
                          @blur="
                            e => handlerBatchBlur(e, columnIndex, colgroupIndex)
                          "
                        />
                        <a-tag
                          style="float: left"
                          closable
                          @close="
                            handlerDelBatchpitem(
                              tIndex,
                              columnIndex,
                              colgroupIndex
                            )
                          "
                          class="mb10"
                          v-for="(t, tIndex) in pitem.batchTags"
                          :key="t"
                        >
                          {{ t }}</a-tag
                        >
                      </div>
                      <a-row class="action-wrap p10 df jcfe">
                        <a-button
                          size="small"
                          class="mr10"
                          @click="() => (pitem.isBatch = false)"
                        >
                          切换普通查询
                        </a-button>
                        <a-button
                          size="small"
                          class="mr10"
                          type="primary"
                          ghost
                          @click="
                            () => {
                              pitem.batchTags = []
                              handleBatchSearch(
                                confirm,
                                column,
                                true,
                                columnIndex,
                                colgroupIndex
                              )
                            }
                          "
                        >
                          重置
                        </a-button>
                        <a-button
                          size="small"
                          type="primary"
                          @click="
                            () => {
                              handleBatchSearch(confirm, column, true)
                            }
                          "
                        >
                          确定
                        </a-button>
                      </a-row>
                    </div>
                  </template>
                  <!-- 单个 搜索所 -->
                  <template v-else>
                    <div class="sort-wrap df jcsb p10">
                      <div>
                        <span
                          class="cp mr30"
                          :style="{
                            color: pitem.desc === 'asc' ? '#1989fa' : ''
                          }"
                          @click="
                            handleSort(
                              'asc',
                              columnIndex,
                              confirm,
                              colgroupIndex
                            )
                          "
                        >
                          <SortAscendingOutlined />
                          <span class="fs12">升序</span>
                        </span>
                        <span
                          class="cp"
                          :style="{
                            color: pitem.desc === 'desc' ? '#1989fa' : ''
                          }"
                          @click="
                            handleSort(
                              'desc',
                              columnIndex,
                              confirm,
                              colgroupIndex
                            )
                          "
                        >
                          <SortDescendingOutlined />
                          <span class="fs12">降序 </span>
                        </span>
                      </div>
                      <div>
                        <a-checkbox
                          v-if="pitem.needEmpty"
                          :key="pitem.isBlank"
                          :checked="pitem.isBlank"
                          @change="e => setBlank(e, columnIndex, colgroupIndex)"
                        >
                          空
                        </a-checkbox>
                        <DiffOutlined
                          class="ml10"
                          :style="{
                            color: pitem.batchTags?.length > 0 ? '#1989fa' : ''
                          }"
                          v-if="pitem.isBatchQuery == 1"
                          @click="() => (pitem.isBatch = true)"
                          style="font-size: 20px"
                        />
                      </div>
                    </div>
                    <!-- 时间范围选择 -->
                    <div
                      v-if="pitem.model === 1"
                      class="date-wrap mb10 pr10 pl10"
                    >
                      <a-range-picker
                        :getCalendarContainer="trigger => trigger.parentNode"
                        v-model:value="pitem.filterValue"
                        style="width: 300px"
                        format="YYYY-MM-DD"
                        allowClear
                        value-format="YYYY-MM-DD"
                      />
                    </div>
                    <!-- 数字范围 model 7-->
                    <div
                      v-else-if="pitem.model === 7"
                      class="number-wrap mb10 pr10 pl10 df aic jcc"
                      style="width: 250px"
                    >
                      <a-input-number
                        :min="0"
                        placeholder="最小值"
                        :precision="0"
                        allowClear
                        v-model:value="pitem.filterValue[0]"
                        class="mr10 f1"
                      />
                      ~
                      <a-input-number
                        :min="pitem.filterValue[0] || 0"
                        :precision="0"
                        allowClear
                        placeholder="最大值"
                        v-model:value="pitem.filterValue[1]"
                        class="ml10 f1"
                      />
                    </div>
                    <div
                      v-else
                      class="search-wrap pr10 pl10"
                      style="border-bottom: 1px solid #eaeaea; max-width: 300px"
                    >
                      <!-- 远程搜索 -->
                      <a-input-search
                        allowClear
                        v-if="pitem.model === 2"
                        :placeholder="`搜索 ${pitem.customeTitle}`"
                        :loading="state.loading"
                        v-model:value="pitem.params.queryStr"
                        @change="
                          e => remoteSearch(e, columnIndex, colgroupIndex)
                        "
                      />
                      <a-input
                        v-else
                        allowClear
                        v-model:value="pitem.searchValue"
                        :placeholder="`搜索 ${pitem.customeTitle}`"
                        @change="
                          e => inputSearch(e, columnIndex, colgroupIndex)
                        "
                        @pressEnter="() => handleSearch(confirm, column)"
                      />
                      <div class="checkbox-wrap">
                        <a-spin :spinning="state.loading">
                          <div class="flex">
                            <a-checkbox
                              :key="pitem.checkAll"
                              :checked="pitem.checkAll"
                              :indeterminate="pitem.indeterminate"
                              @change="
                                e =>
                                  onCheckAllChange(
                                    e,
                                    columnIndex,
                                    colgroupIndex
                                  )
                              "
                            >
                              全选
                            </a-checkbox>
                            <span v-if="pitem.plainOptions"
                              >({{
                                pitem.filterValue
                                  ? pitem.filterValue.length
                                  : 0
                              }}/
                              {{
                                pitem.plainOptions && pitem.plainOptions.length
                              }})</span
                            >
                          </div>
                          <a-divider
                            dashed
                            style="margin-top: 10px; margin-bottom: 10px"
                          />
                          <a-checkbox-group
                            v-model:value="pitem.filterValue"
                            @change="
                              values =>
                                onChange(values, columnIndex, colgroupIndex)
                            "
                          >
                            <div v-for="c in pitem.plainOptions" :key="c.value">
                              <a-checkbox :value="c.key" :label="c.key">
                                {{ c.value || '空' }}
                              </a-checkbox>
                            </div>
                          </a-checkbox-group>
                        </a-spin>
                      </div>
                    </div>

                    <div class="action-wrap p10 df jcfe">
                      <a-button
                        type="primary"
                        size="small"
                        style="width: 90px; margin-right: 8px"
                        @click="() => handleSearch(columnIndex, colgroupIndex)"
                      >
                        <template #icon>
                          <SearchOutlined />
                        </template>
                        搜索
                      </a-button>
                      <a-button
                        size="small"
                        style="width: 90px"
                        @click="() => handleReset(columnIndex, colgroupIndex)"
                      >
                        重置
                      </a-button>
                    </div>
                  </template>
                </template>

                <template #default="{ row, rowIndex }">
                  <slot
                    :name="pitem.slots ? pitem.slots.customRender : ''"
                    v-bind="{
                      text: row[pitem.dataIndex],
                      record: row,
                      index: rowIndex,
                      childrenList: pitem.childrenList
                    }"
                  >
                    <span
                      v-if="
                        !pitem.childrenList || pitem.childrenList.length === 0
                      "
                    >
                      {{ row[pitem.dataIndex] }}
                    </span>
                    <div
                      v-for="c in pitem.childrenList"
                      v-else
                      :key="c.requestStr"
                    >
                      {{ c.columnName }}：{{ row[c.requestStr] || '-' }}
                    </div>
                  </slot>
                </template>
              </vxe-column>
            </vxe-colgroup>
            <vxe-column
              v-else
              :fixed="item.fixed"
              :field="item.dataIndex"
              :filters="[]"
              :width="calcColumnWidth(item)"
              :title="item.title"
              :sortable="item.sortable"
              :align="item.align"
            >
              <template #header="{ column }">
                <slot
                  :name="item.slots?.titleLeft"
                  v-if="item.slots && item.slots.titleLeft"
                ></slot>
                <slot :name="item.slots && item.slots.title">
                  <b>{{ column.title }}</b>
                </slot>
                <vxe-icon
                  v-if="item?.filtered"
                  @click="openFilterEvent(column)"
                  name="funnel"
                  class="icon-filter cursor-pointer ml-10px"
                  :class="{
                    active: item?.filterValue?.length > 0
                  }"
                ></vxe-icon>
                <slot
                  :name="item.slots?.titleRight"
                  v-if="item.slots && item.slots.titleRight"
                ></slot>
              </template>
              <!-- 自定义筛选 -->
              <template v-if="item?.filtered" #filter="{ column }">
                <!-- 批量搜索 -->
                <template v-if="item.isBatch">
                  <div class="vxeTable-batch-search">
                    <div class="rm-popover pr p10" style="overflow: hidden">
                      <h4 class="mb10">批量查询</h4>
                      <a-input
                        style="width: 100%"
                        allowClear
                        v-model:value="item.batchValue"
                        placeholder="支持复制或输入关键词"
                        @pressEnter="e => handlerBatchBlur(e, columnIndex)"
                        @blur="e => handlerBatchBlur(e, columnIndex)"
                      />
                      <a-tag
                        style="float: left"
                        closable
                        @close="handlerDelBatchItem(tIndex, columnIndex)"
                        class="mb10"
                        v-for="(t, tIndex) in item.batchTags"
                        :key="t"
                      >
                        {{ t }}</a-tag
                      >
                    </div>
                    <a-row class="action-wrap p10 df jcfe">
                      <a-button
                        size="small"
                        class="mr10"
                        @click="() => (item.isBatch = false)"
                      >
                        切换普通查询
                      </a-button>
                      <a-button
                        size="small"
                        class="mr10"
                        type="primary"
                        ghost
                        @click="
                          () => {
                            item.batchTags = []
                            handleBatchSearch(
                              confirm,
                              column,
                              true,
                              columnIndex
                            )
                          }
                        "
                      >
                        重置
                      </a-button>
                      <a-button
                        size="small"
                        type="primary"
                        @click="
                          () => {
                            handleBatchSearch(confirm, column, true)
                          }
                        "
                      >
                        确定
                      </a-button>
                    </a-row>
                  </div>
                </template>
                <!-- 单个 搜索所 -->
                <template v-else>
                  <div class="sort-wrap df jcsb p10">
                    <div>
                      <span
                        class="cp mr30"
                        :style="{
                          color: item.desc === 'asc' ? '#1989fa' : ''
                        }"
                        @click="handleSort('asc', columnIndex, confirm)"
                      >
                        <SortAscendingOutlined />
                        <span class="fs12">升序</span>
                      </span>
                      <span
                        class="cp"
                        :style="{
                          color: item.desc === 'desc' ? '#1989fa' : ''
                        }"
                        @click="handleSort('desc', columnIndex, confirm)"
                      >
                        <SortDescendingOutlined />
                        <span class="fs12">降序 </span>
                      </span>
                    </div>
                    <div>
                      <a-checkbox
                        v-if="item.needEmpty"
                        :key="item.isBlank"
                        :checked="item.isBlank"
                        @change="e => setBlank(e, columnIndex)"
                      >
                        空
                      </a-checkbox>
                      <DiffOutlined
                        class="ml10"
                        :style="{
                          color: item.batchTags?.length > 0 ? '#1989fa' : ''
                        }"
                        v-if="item.isBatchQuery == 1"
                        @click="() => (item.isBatch = true)"
                        style="font-size: 20px"
                      />
                    </div>
                  </div>
                  <!-- 时间范围选择 -->
                  <div v-if="item.model === 1" class="date-wrap mb10 pr10 pl10">
                    <a-range-picker
                      :getCalendarContainer="trigger => trigger.parentNode"
                      v-model:value="item.filterValue"
                      style="width: 300px"
                      format="YYYY-MM-DD"
                      allowClear
                      value-format="YYYY-MM-DD"
                    />
                  </div>
                  <!-- 数字范围 model 7-->
                  <div
                    v-else-if="item.model === 7"
                    class="number-wrap mb10 pr10 pl10 df aic jcc"
                    style="width: 250px"
                  >
                    <a-input-number
                      :min="0"
                      placeholder="最小值"
                      :precision="0"
                      allowClear
                      v-model:value="item.filterValue[0]"
                      class="mr10 f1"
                    />
                    ~
                    <a-input-number
                      :min="item.filterValue[0] || 0"
                      :precision="0"
                      allowClear
                      placeholder="最大值"
                      v-model:value="item.filterValue[1]"
                      class="ml10 f1"
                    />
                  </div>
                  <div
                    v-else
                    class="search-wrap pr10 pl10"
                    style="border-bottom: 1px solid #eaeaea; max-width: 300px"
                  >
                    <!-- 远程搜索 -->
                    <a-input-search
                      allowClear
                      v-if="item.model === 2"
                      :placeholder="`搜索 ${item.customeTitle}`"
                      :loading="state.loading"
                      v-model:value="item.params.queryStr"
                      @change="e => remoteSearch(e, columnIndex)"
                    />
                    <a-input
                      v-else
                      allowClear
                      v-model:value="item.searchValue"
                      :placeholder="`搜索 ${item.customeTitle}`"
                      @change="e => inputSearch(e, columnIndex)"
                      @pressEnter="() => handleSearch(confirm, column)"
                    />
                    <div class="checkbox-wrap">
                      <a-spin :spinning="state.loading">
                        <div class="flex">
                          <a-checkbox
                            :key="item.checkAll"
                            :checked="item.checkAll"
                            :indeterminate="item.indeterminate"
                            @change="e => onCheckAllChange(e, columnIndex)"
                          >
                            全选
                          </a-checkbox>
                          <span v-if="item.plainOptions"
                            >({{
                              item.filterValue ? item.filterValue.length : 0
                            }}/
                            {{
                              item.plainOptions && item.plainOptions.length
                            }})</span
                          >
                        </div>
                        <a-divider
                          dashed
                          style="margin-top: 10px; margin-bottom: 10px"
                        />
                        <a-checkbox-group
                          v-model:value="item.filterValue"
                          @change="values => onChange(values, columnIndex)"
                        >
                          <div v-for="c in item.plainOptions" :key="c.value">
                            <a-checkbox :value="c.key" :label="c.key">
                              {{ c.value || '空' }}
                            </a-checkbox>
                          </div>
                        </a-checkbox-group>
                      </a-spin>
                    </div>
                  </div>

                  <div class="action-wrap p10 df jcfe">
                    <a-button
                      type="primary"
                      size="small"
                      style="width: 90px; margin-right: 8px"
                      @click="() => handleSearch(columnIndex)"
                    >
                      <template #icon>
                        <SearchOutlined />
                      </template>
                      搜索
                    </a-button>
                    <a-button
                      size="small"
                      style="width: 90px"
                      @click="() => handleReset(columnIndex)"
                    >
                      重置
                    </a-button>
                  </div>
                </template>
              </template>

              <template #default="{ row, rowIndex }">
                <slot
                  :name="item.slots ? item.slots.customRender : ''"
                  v-bind="{
                    text: row[item.dataIndex],
                    record: row,
                    index: rowIndex,
                    childrenList: item.childrenList
                  }"
                >
                  <span
                    v-if="!item.childrenList || item.childrenList.length === 0"
                  >
                    {{ row[item.dataIndex] }}
                  </span>
                  <div
                    v-for="c in item.childrenList"
                    v-else
                    :key="c.requestStr"
                  >
                    <span class="text-grey"> {{ c.columnName }}： </span>

                    <span class="text-black">{{
                      row[c.requestStr] || '-'
                    }}</span>
                  </div>
                </slot>
              </template>
            </vxe-column>
          </template>
        </template>
      </vxe-table>
    </div>
    <footer
      ref="pagination"
      v-if="hasPaginate"
      class="df jcsb p10 h-40px"
      style="padding-bottom: 0"
    >
      <div class="o06">
        {{
          `共 ${paginate.total || 0}条数据，第${paginate.pageNum}/${Math.ceil(
            (paginate.total || 0) / paginate.pageSize
          )}页`
        }}
      </div>
      <div>
        <a-pagination
          size="small"
          :page-size="paginate.pageSize"
          v-model:current="paginate.pageNum"
          :total="paginate.total"
          @change="changePage"
          @showSizeChange="changePage"
          :pageSizeOptions="['20', '50', '100', '150', '200', '500']"
          show-size-changer
          show-quick-jumper
        />
      </div>
    </footer>
  </section>
</template>
<script setup>
import ColumnSettings from '../ColumnSettings.vue'
import { useTable, paginate, tableDom } from './vexTable'
import {
  SearchOutlined,
  SortAscendingOutlined,
  SortDescendingOutlined,
  DiffOutlined
  // ExclamationCircleOutlined
} from '@ant-design/icons-vue'
const props = defineProps({
  value: {
    type: Array
  },
  loading: {
    type: Boolean,
    default: false
  },
  // 获取列接口的菜单名称
  menuName: {
    type: String,
    default: ''
  },
  tableId: {
    type: String
  },
  // 是否支持多选
  showSelection: {
    type: Boolean,
    default: true
  },
  interfaceURL: {
    type: String,
    default: ''
  },
  // 是否显示列设置
  showSetting: {
    type: Boolean,
    default: false
  },
  hasExport: {
    type: Boolean,
    default: false
  },
  hasPrint: {
    type: Boolean,
    default: false
  },
  hasReset: {
    type: Boolean,
    default: true
  },
  hasRefresh: {
    type: Boolean,
    default: true
  },
  // 表格是否显示分页
  hasPaginate: {
    type: Boolean,
    default: true
  },
  // 是否显示操作项目
  hasAction: {
    type: Boolean,
    default: false
  },
  //是否显示底部
  // hasFooter: {
  //   type: Boolean,
  //   default: false
  // },
  // 是否立即查询数据，若为false，则手动调refresh或reset
  immediate: {
    type: Boolean,
    default: true
  },
  // 列设置的按钮样式
  buttonStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  isCustomWidth: {
    type: Boolean,
    default: true
  },
  // 列宽设置
  columnWidth: {
    type: Object,
    default: () => {
      return {}
    }
  },
  columnFixed: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 拉取table数据的接口参数
  apiParams: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 场景： 网址带搜索条件，打开网站后默认进行过滤搜索
  queryParams: {
    type: Object,
    default: () => {
      return {}
    }
  },
  columns: {
    type: Array,
    default: null
  },
  rowKey: {
    type: [String, Function],
    default: 'id'
  },
  // 使用场景，以某个字段的值为条件，查询满足这个条件下的所有筛选项
  // 列设置的参数
  queryFields: {
    type: Array,
    default: () => {
      return []
    }
  },
  pageSize: {
    type: Number,
    default: 100
  },
  rowType: {
    type: String,
    default: 'checkbox'
  },
  selectedRowKeys: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 发送请求前function
  beforeReqLoad: {
    type: Function,
    default: null
  },
  // 接口响应后function
  afterRespLoad: {
    type: Function,
    default: null
  },
  method: {
    type: String,
    default: 'post'
  },
  filterStorage: {
    type: Boolean,
    default: false
  },
  isRenderTableData: {
    type: Boolean,
    default: true
  },
  mergeCells: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const emits = defineEmits([
  'update:value',
  'change',
  'select',
  'export',
  'update:columns'
])
const {
  state,
  onCancelSelect,
  exportExcel,
  refresh,
  reset,
  changePage,
  selectChangeEvent,
  radioChangeEvent,
  getCheckboxRecords,
  // filterChangeEvent,
  filterVisibleEvent,
  onChange,
  openFilterEvent,
  handleReset,
  remoteSearch,
  inputSearch,
  handleSearch,
  setBlank,
  onCheckAllChange,
  handlerBatchBlur,
  handleBatchSearch,
  handlerDelBatchItem,
  handleSort,
  refreshColumn,
  printSelectEvent,
  queryAllParams,
  calcColumnWidth
} = useTable(props, emits)

defineExpose({
  getCheckboxRecords,
  reset,
  refresh,
  queryAllParams
})
</script>
<style>
.cpsVxeTable.vxeNoOverflow .vxe-body--column {
  height: unset !important;
}

.cpsVxeTable.vxeNoOverflow .vxe-body--column .vxe-cell {
  max-height: unset !important;
}
.cpsVxeTable .vxe-body--column .vxe-cell {
  overflow-y: auto !important;
}
.cpsVxeTable .vxeTable-batch-search {
  width: 350px;
}
.cpsVxeTable .icon-filter {
  color: #c0c4cc;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.cpsVxeTable .vxe-table--filter-footer {
  display: none;
}
.cpsVxeTable .icon-filter.active {
  color: #409eff;
}
.cpsVxeTable tr td {
  font-size: 12px;
}
/* .cpsVxeTable tr td .ant-btn-link {
  padding: 0;
} */
.search-wrap .checkbox-wrap {
  margin-top: 6px;
}
.search-wrap .ant-checkbox-group {
  min-height: 40px;
  max-height: 200px;
  overflow-y: scroll;
  width: 220px;
}

.search-wrap .ant-checkbox-group .ant-checkbox-wrapper {
  word-break: break-all;
  font-size: 12px;
  display: flex;
}

.search-wrap .ant-checkbox-group .ant-checkbox {
  margin-top: 3px;
  height: 16px;
}
.cpsVxeTable .vxe-cell--filter .vxe-filter--btn {
  /* display: none; */
  opacity: 0;
}
</style>
